<template>
	<view class="container">
		<!-- 标题 -->
		<view class="header">
			<text class="header-title">收藏学习笔记</text>
		</view>

		<!-- 输入表单 -->
		<view class="form">
			<!-- 标题输入框 -->
			<input class="input" type="text" v-model="title" placeholder="请输入标题" />

			<!-- 分类按钮 -->
			<view class="category">
				<text class="category-label">分类:</text>
				<view class="category-buttons">
					<button
						v-for="(item, index) in categories"
						:key="index"
						class="category-button"
						:class="{ active: selectedCategory === item }"
						@click="handleCategoryClick(item)"
					>
						{{ item }}
					</button>
				</view>
			</view>

			<!-- 如果选择“其他”，显示额外的输入框 -->
			<view v-if="selectedCategory === '其他'" class="other-category">
				<input class="input" type="text" v-model="otherCategory" placeholder="请输入具体分类" />
			</view>

			<!-- 备注 -->
			<text class="textarea-label">具体内容:</text>
			<textarea class="textarea" v-model="notes" placeholder="请输入收藏内容"></textarea>

			<!-- 图片上传 -->
			<view class="upload">
				<view class="upload-box" @click="chooseImage">
					<text v-if="!image">+</text>
					<image v-if="image" class="upload-image" :src="image" />
				</view>
			</view>
		</view>

		<!-- 收藏按钮 -->
		<button class="submit-button" @click="addToFavorites">收藏</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				selectedCategory: '',
				otherCategory: '', // 其他分类的具体内容
				categories: ['数理','人文', '计算机', '生活', '其他'],
				notes: '',
				image: ''
			};
		},
		onLoad(options) {
		    if (options.content) {
		        this.notes = decodeURIComponent(options.content); // 自动填充备注
		    }
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.image = res.tempFilePaths[0];
					}
				});
			},
			handleCategoryClick(category) {
				this.selectedCategory = category;
				if (category !== '其他') {
					this.otherCategory = ''; // 清空其他分类的具体内容
				}
			},
			addToFavorites() {
				if (!this.title || !this.selectedCategory || (this.selectedCategory === '其他' && !this.otherCategory)) {
					this.$mes('请填写完整信息');
					return;
				}

				const data = {
					title: this.title,
					category: this.selectedCategory === '其他' ? this.otherCategory : this.selectedCategory,
					notes: this.notes,
					image: this.image,
					time: new Date().toLocaleString()
				};

				// 保存到本地存储
				let favorites = uni.getStorageSync('favorites') || [];
				favorites.push(data);
				uni.setStorageSync('favorites', favorites);

				this.$mes('收藏成功');
				this.resetForm();
			},
			resetForm() {
				this.title = '';
				this.selectedCategory = '';
				this.otherCategory = '';
				this.notes = '';
				this.image = '';
			}
		}
	};
</script>

<style scoped>
.container {
	background-color: #f7f8fa;
	padding: 20rpx;
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 20rpx;
}
.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #7e57c2;
}

.form {
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
}

.input {
	width: 100%;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
	background: #f9f9f9;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}

.category {
	margin-bottom: 20rpx;
}
.category-label {
	font-size: 28rpx;
	color: #555;
	margin-bottom: 10rpx;
}
.category-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}
.category-button {
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	background: #f0f0f0;
	color: #555;
	font-size: 26rpx;
	cursor: pointer;
}
.category-button.active {
	background: #7e57c2;
	color: #fff;
}

.textarea-label {
	font-size: 28rpx;
	color: #555;
	margin-bottom: 10rpx;
}
.textarea {
	width: 100%;
	min-height: 120rpx;
	padding: 20rpx;
	font-size: 28rpx;
	background: #f9f9f9;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}

.upload {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}
.upload-box {
	width: 120rpx;
	height: 120rpx;
	background: #f0f0f0;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 48rpx;
}
.upload-image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
	object-fit: cover;
}

.submit-button {
	width: 100%;
	padding: 20rpx;
	font-size: 32rpx;
	color: #fff;
	background: #7e57c2;
	border-radius: 12rpx;
	text-align: center;
}
</style>
